$(function () {

    $(".zhao").on("mouseover", ".zha", function () {
        $(this).find(".goods-handle").css({ "display": "block" })
    })
    $(".zhao").on("mouseout", ".zha", function () {
        $(this).find(".goods-handle").css({ "display": "none" })
    })

    $.ajax({
        url: "./json/gooslist.json",
        dataType: "json",
        type: "GET",
        catch: false
    })
        .done(function (res) {
            console.log(res);
            var data = res.data.slice(0, 1);
            $(".zhao").append(
                res.data.map(item => `<div class="zha">
            <div id="z">
            <img src="${item.img}" id="dianji" alt="净澈焕肤洁面乳" style="opacity: 1;">
        </div>
        <div class="zh">
            <p>${item.hao}</p>
        </div>
        <div class="zi">
            <p>${item.name}</p>
            <p>Clarifique Pore Refining Cleansing Foam</p>
        </div>
        <div class="col-12-6 col-sm-12-12 goods-price">
            <span>${item.jia}</span>
        </div>
        <div class="goods-handle">
            <div class="btn-box">
                <a href="./gw.html"class="btn btn-black event-quickbuy-cart" data-code="LAN00813-001">立即购买</a>
                <a href="./xian.html" class="btn btn-black-border e-read-more" data-code="LAN00813-001">了解详情</a>
            </div>
        </div>
        </div>`).join("")
            );
        
        })

   

})





    
